<template>
  <div class="DynamicTableForm">
    <div class="dynamicForm-content">
      <DinamicForm :formConfigs="formConfigs" v-model="dinamicFormData" @notify="handleFormWidgetNotify">
        <template #[item.innerName]="scope" v-for="item in formSlots">
            <slot :name="item.name" :scope="{ ...scope }"></slot>
        </template>
      </DinamicForm>
    </div>
    <div class="dynamicTable-content">
      <DynamicTable
        :tableHeaderConfigs="tableHeaderConfigs"
        :tableData="tableData"
      >
        <!-- <template #operation="{ row, index }">
          <div>
            <el-link type="primary">查看详情</el-link>
          </div>
        </template> -->
        <!-- <template #[name]="scope" v-for="name in tableSlots">
            <slot :name="name" :scope="{ ...scope }"></slot>
        </template> -->
        <template #[item.innerName]="scope" v-for="item in tableSlots">
            <slot :name="item.name" :scope="{ ...scope }"></slot>
        </template>
      </DynamicTable>
    </div>
    <div class="dynamic-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentPage"
        :current-page="paginationConfig.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="paginationConfig.pageSize"
        layout="total, prev, pager, next,sizes,jumper"
        :total="paginationConfig.total"
        :popper-class="paginationConfig.popperClass?paginationConfig.popperClass:''"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, useSlots,reactive, onMounted, provide, computed, watch } from "vue";
import DynamicTable from "@/components/common/DynamicTable/DynamicTable.vue";
import DinamicForm from "@/components/common/DinamicForm/DinamicForm.vue";

const props = defineProps(["tableData", "formData","tableHeaderConfigs", "formConfigs","paginationConfig"]);
const emits=defineEmits(["pageSizeChange","pageNumChange","notify","update:formData"])

// watch(()=>props.tableHeaderConfigs,(newValue,oldValue)=>{
//   debugger
// },{deep:true})

function handleFormWidgetNotify(params) {
  emits("notify", params);
}

function handleSizeChange(val) {
  props.paginationConfig.pageSize = val;
  emits("pageSizeChange",val)
}
function handleCurrentPage(val) {
  props.paginationConfig.pageNum = val;
  emits("pageNumChange",val)
}
const dinamicFormData = computed({
  get(){
    return props.formData
  },
  set(val){
    emits('update:formData',val)
  }
})
const allSlots = useSlots()
const formSlots = computed(() => {
    // 过滤出属于 form 组件的插槽
    let solts = Object.keys(allSlots).filter(key => key.startsWith('form-'));
    solts = solts.map(x=>{
        return {
            name: x,
            innerName:x.split('form-')[1]
        }
    })
    return solts
});
const tableSlots = computed(() => {
    // 过滤出属于 table 组件的插槽
    let solts = Object.keys(allSlots).filter(key => key.startsWith('table-'));
    solts = solts.map(x=>{
        return {
            name: x,
            innerName:x.split('table-')[1]
        }
    })
    return solts
});
</script>

<style lang="less" scoped>
.DynamicTableForm {
  display: flex;
  flex-direction: column;
  height: 100%;
  .dynamicTable-content {
    flex: 1;
    height: 0px;
  }
  .dynamic-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
    height: 40px;
  }
}
</style>
